
/**
  * 公用样式
 **/
@charset "utf-8";
*{margin:0;padding:0;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-moz-user-select:none;}
body{font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;font-size:100%;}ul,ol{list-style-type:none}a{text-decoration:none;color:#131315;blr:expression(this.onFocus=this.blur());}
a:hover{text-decoration:none;}a:focus{outline:none;}li:focus{outline:none;}img{border:0}em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;}caption,th,td{font-weight:normal;text-align:left;}
input,textarea,select,button{background:none;outline:none;}label,button{cursor:pointer}
textarea{white-space:pre;resize:none;}button,input,select,textarea{font-size:100%;}canvas{margin:0;padding:0;display:block;border:0;font-size:100%;}
input,select,textarea{appearance:none;-moz-appearance:none;-webkit-appearance:none;border-radius:0;}
h1,h2,h3,h4,h5,h6{font-weight: normal;}.clear{clear:both;}.clearfix:after{content:"";display:block;clear:both;}
.float_left{float: left;}.float_right{float: right;}


.middlebox{width: 100%;max-width:640px;margin:auto}
.largebox{width: 100%;max-width: 1200px;margin:auto}
.page_bg{background-repeat: no-repeat;background-size:100% 100%;position: relative;}

/*进度条*/
.load_page{position:fixed;width:100%;max-width:640px;height:100%;font-size:16px;
    background-repeat: no-repeat;background-size: cover;background-position: 50%;}
.load_page_bg {width: 100%;}
.load_page_content{position:absolute;bottom:70px;width:90%;left:5%;text-align: center;z-index:2;color:#672cff;}
.progress_bar{border-radius:5px;width:86%;border:1px solid #fff;border-bottom: 2px solid #fff;height: 10px;margin-top: 6px;text-align: left;}
.progress_bar .progress_bg{position:relative;top:-4px;height:10px;border-radius:4px;width: 0;}
.progress_bar .loading_most{width:80%;transition:3s ease-in;-webkit-transition:3s ease-in;-moz-transition:3s ease-in;}
.progress_bar .loading_finish{width:100%;transition:1.5s ease-in;-webkit-transition:1.5s ease-in;-moz-transition:1.5s ease-in;}
.load_page_content .progress{position:absolute;bottom:-2px;right:-5px;z-index:3;}





/*头部*/
.page_header{display: flex;display:-webkit-flex;color:#fff;font-size: 0.14rem;height:0.66rem;}
.page_header>div:nth-child(1) {width: 10%;text-align: center;}
.page_header>div:nth-child(1) .back_btn{position: relative;top:7px;width: 0.4rem;z-index:33312312313}

.page_header .last_result>div:nth-child(1){margin-left: 5%}
.page_header .last_result{width:25%;font-size:0.11rem;height: 0.6rem;display: flex;display:-webkit-flex;margin-left: 1%;
    background-image: url(../img/last_result_bg.png);background-repeat: no-repeat;background-size:100% 100%;}
.page_header .last_result>span{width: 18%;align-self: center;line-height: 0.16rem;text-align: center;}

.page_header>div:nth-child(3){width:31%;font-size:0.10rem;text-align: center;display: flex;display:-webkit-flex;
    background-image: url(../img/head_bg.png);background-repeat: no-repeat;background-size:100% 100%;height:100%;}
.page_header .head_center_left{width: 34%;text-align: center;margin-left: 10%;margin-top:4px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.page_header .head_center_right{width: 46%;text-align: left;margin-top:4px;line-height:0.15rem;font-size:0.14rem;}
.page_header .self_avatar_small{width: 0.3rem;height: 0.3rem;border:1px solid #fff;border-radius:100%;}
.page_header .gold_small{position: relative;top:1px;left:1px;width: 10px;}

.page_header>div:nth-child(4){width:10%;font-size:0.14rem;margin-top:0.11rem;position: relative;}
.page_header .time_box{width: 0.36rem;height:0.36rem;line-height: 0.36rem;margin: auto;background-image: url(../img/time_bg.png);
    background-repeat:no-repeat;background-size:100% 100%;text-align:center;font-size:0.13rem;position: absolute;left:50%;top:0.04rem;margin-left: -0.185rem;}

.page_header>div:nth-child(5){width:5.8%;margin-top:0.12rem;margin-right: 1.5%;}
.page_header>div:nth-child(6){width:5.8%;margin-top:0.12rem;margin-right: 1.5%;}
.page_header>div:nth-child(7){width:5.8%;margin-top:0.12rem;margin-right: 1.5%;}

/*倒计时*/
.circleProgress_wrapper{width:0.44rem;height: 0.44rem;margin:auto;position: relative;}
.circleProgress_wrapper .wrapper{width: 0.22rem;height: 0.44rem;position: absolute;top:0;overflow: hidden;}
.circleProgress_wrapper .right{right:0;}
.circleProgress_wrapper .left{left:0;}
.circleProgress{width:0.44rem;height:0.44rem;box-sizing:border-box;border:0.03rem solid #f0a326;border-radius: 50%;position: absolute;top:0;-webkit-transform: rotate(45deg);}
.rightcircle{right:0;border-top:0.03rem solid rgba(255,255,255,0.5);border-right:0.03rem solid rgba(255,255,255,0.5);}
.leftcircle{left:0;border-left:0.03rem solid rgba(255,255,255,0.5);border-bottom:0.03rem solid rgba(255,255,255,0.5);}
.circle_right_transform{animation: circleProgressLoad_right 1s linear infinite;-webkit-animation: circleProgressLoad_right 1s linear infinite;}
.circle_left_transform{animation: circleProgressLoad_right 1s linear infinite;-webkit-animation: circleProgressLoad_left 1s linear infinite;}
@keyframes circleProgressLoad_right{
    0%{transform: rotate(45deg);}
    50%{transform: rotate(225deg);}
    100%{transform: rotate(225deg);}}
@-webkit-keyframes circleProgressLoad_right{
    0%{-webkit-transform: rotate(45deg);}
    50%{-webkit-transform: rotate(225deg);}
    100%{-webkit-transform: rotate(225deg);}}
@-webkit-keyframes circleProgressLoad_left{
    0%{-webkit-transform: rotate(45deg);}
    50%{-webkit-transform: rotate(45deg);}
    100%{-webkit-transform: rotate(225deg);}}
@keyframes circleProgressLoad_left{
    0%{transform: rotate(45deg);}
    50%{transform: rotate(45deg);}
    100%{transform: rotate(225deg);}}


/*中部 摇号*/
.page_subtitle{width: 36%;margin: auto;height:0.58rem;font-size: 0.14rem;margin-bottom: 0.04rem;position: relative;}
.page_subtitle .float_left{width: 22%;}
.page_subtitle .float_left>img{margin-top:0.25rem;width:90%;}
.page_subtitle .two_words_btn{position: absolute;top:0.08rem;right:-0.95rem;width:0.8rem;}
.page_subtitle .float_right{width: 78%;height:100%;padding:0.05rem 0.27rem 0.05rem 0.1rem;box-sizing: border-box;
    background-image: url(../img/number_bg.png);background-repeat: no-repeat;background-size:100% 100%;}
.lottery_unit,.lottery_box{display: flex;display: -webkit-flex;font-size: 0.1rem;text-align: center;}
.lottery_unit>span{flex-grow: 1;-webkit-flex-grow: 1;line-height: 0.16rem;}
.lottery_box{height:0.3rem;display: flex;display: -webkit-flex;color:#fff;
    background-image: url(../img/number_bg_1.png);background-repeat: no-repeat;background-size:100% 100%;}
.lottery_div{line-height: 0.3rem;width:16%;overflow: hidden;}
.lottery_div:nth-child(3){flex-grow: 0.25;-webkit-flex-grow:0.25;}
.lottery_div:nth-child(1),.lottery_div:nth-child(5){flex-grow: 0.2;-webkit-flex-grow:  0.2;}
.lottery_div:nth-child(2),.lottery_div:nth-child(4){flex-grow: 1;-webkit-flex-grow:1;}
.lottery_div>span{display: block;}

/*主要区域*/
.page_main{font-size:0.14rem;width:4.5rem;margin:auto;display: flex;display:-webkit-flex;border-top:2px solid rgba(0,150,208,0.2);}
.page_main_unit{}
.page_main_unit >div{height:0.7rem;padding-left:0.5rem;width:0.7rem;flex-grow:1;-webkit-flex-grow:1;
    background-repeat: no-repeat;background-size:0.4rem 0.4rem;background-position: 0.07rem 0.22rem;
    border-right:2px solid rgba(0,150,208,0.2);padding-top:0.17rem;position:relative;}
.page_main_unit >div:nth-child(4){border-right:0px;}
.page_main_unit .odds{position: absolute;bottom:0.06rem;left:0.13rem;color:#0096d0;font-family: '方正兰亭黑_gbk';}
.page_main_unit .unit_btn{width: 0.25rem;height:0.25rem;float:left;margin-top:3px;overflow: hidden;background-repeat: no-repeat;background-size:100%;}
.page_main_unit .wan{background-image: url(../img/btn/wan.png);}
.page_main_unit .qian{background-image: url(../img/btn/qian.png);margin-left:0.06rem;}
.page_main_unit .bai{background-image: url(../img/btn/bai.png);}
.page_main_unit .shi{background-image: url(../img/btn/shi.png);margin-left:0.06rem;}
.page_main_draw{position:relative;}
.page_main_draw>div{flex-grow:1;-webkit-flex-grow:1;height:0.65rem;border-right:2px solid rgba(0,150,208,0.2);}
.page_main_draw>div:nth-child(4){border-right:0px;}
.page_main_draw .number{color:#fff;font-family: '方正兰亭黑_gbk';display:inline-block;margin:0.06rem 0.1rem;}



/*同伴头像*/
.partner_avatar_section{position: absolute;z-index:2;font-size:0.11rem;color:#fff;text-align: center;
    white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 0.52rem;}
.partner_avatar{width: 0.44rem;height:0.44rem;line-height:0.44rem;padding:0.04rem;background-image: url(../img/avatar_border.png);background-repeat: no-repeat;background-size:100% 100%;}
.partner_avatar >img{width: 100%;border-radius: 12px;-webkit-border-radius: 12px;}
.partner_avatar_left_1,.partner_avatar_left_2,.partner_avatar_left_3{left:0.3rem;}
.partner_avatar_right_4,.partner_avatar_right_5,.partner_avatar_right_6{right:0.3rem;}
.partner_avatar_left_1,.partner_avatar_right_4{top:21%;}
.partner_avatar_left_2,.partner_avatar_right_5{top:44.8%;}
.partner_avatar_left_3,.partner_avatar_right_6{top:67.7%;}


/*底部*/
.page_footer{height: 0.64rem;position: absolute;bottom:0;width: 100%;z-index:3;display: flex;display: -webkit-flex;
    background-image: url(../img/footer_bg.png);align-items: flex-end;-webkit-align-items: flex-end;padding-bottom: 2px;
    background-repeat: no-repeat;background-size:100% 100%;font-size:0.14rem;}
.page_footer>div{color:#fff;}
.self_big_avatar{width:0.37rem;margin-left: 12%;height:0.42rem;}
.self_big_avatar>img{width: 100%;border-radius: 100%;border:1px solid #fff;}
.page_footer .coin{width: 0.52rem;margin-right:0.1rem;height: 0.55rem;line-height: 0.55rem;transition: 0.3s ease;-webkit-transition: 0.3s ease;
    text-align:center;background-repeat: no-repeat;background-size:100% 100%;}
.page_footer #coin_1{background-image: url(../img/coin/1.png);}
.page_footer #coin_2{background-image: url(../img/coin/2.png);}
.page_footer #coin_3{background-image: url(../img/coin/3.png);}
.page_footer #coin_4{background-image: url(../img/coin/4.png);}
.page_footer #coin_5{background-image: url(../img/coin/5.png);margin-right:0;}
.page_footer .gold_small{width: 0.1rem;}
.page_footer .self_gold_number{width:0.64rem;margin-left:3px;align-self: flex-end;-webkit-align-self: flex-end;}
.page_footer .self_name{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.draw_again_btn{width:0.36rem;height:0.4rem;margin-left: 0.45rem;}
.draw_again_btn>img{width: 100%;}



/*房间页*/
.room_page{height:100%;}
.room_page_bg{position: fixed;top:44px;z-index:-1;width: 100%;max-width: 640px;}
.room_page .title {position:fixed;top:0;width:100%;max-width: 640px;height:44px;text-align: center;line-height: 54px;
    background-image: url(../img/room_title_bg.png);background-repeat: repeat-x;background-size:100% 100%;}
.room_page .title .search{position: absolute;top:11px;right:23px;z-index:3;width:20px;}
.room_page .title .room_name_input{position: absolute;top:10px;right:16px;width: 33%;z-index: 2;
    text-indent: 1em;transition: 0.3s ease;-webkit-transition: 0.3s ease;-moz-transition: 0.3s ease;
    border-radius: 15px;height:16px;padding:3px 0;line-height: 16px;font-size: 12px;background: #fff;border:0;}
.room_page .room_list_section{font-size:13px;margin-top: 95px;}
.room_page .room_list{color:#fff;padding:10px 8px;border-bottom: 1px solid #fff;display: flex;display: -webkit-flex;}
.room_page .room_list>img{width:45px;height:45px;border-radius: 100%;border:2px solid #fff;margin-left: 35px;}
.room_page .room_list .room_icon{width: 14px;}
.room_page .room_list>div{margin-left:20px;}
.adv_box {
    position: fixed;
    top: 45px;
    height: 40px;
    width: 100%;
    max-width: 640px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

#adv_box_ul {
    width: 100%;
    height: 100%;
    font-size: 16px;
    position: absolute;
    color: #fff;
}

#adv_box_ul li {
    height: 100%;
    line-height: 40px;
    text-indent: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trumpet {
    position: absolute;
    height: 30px;
    top: 4px;
    left: 10px;
}

/*悬浮层*/
.overlay_box{position: fixed;right:0;top:0.24rem;width: 55%;color:#fff;z-index:9;background: rgba(0,0,0,0.7);font-size: 0.11rem;display: none;}
.overlay_box .overlay_head{text-align:center;height:0.24rem;line-height:0.24rem;font-size:0.12rem;background-image: url(../img/overlay_head_bg.png);background-repeat: repeat-x;background-size:100% 100%;}
.overlay_box .overlay_main{height:2.6rem;overflow-y: auto;overflow-x: auto;padding:0 12px;box-sizing: border-box;}
.overlay_box .overlay_foot{background-image: url(../img/overlay_head_bg.png);background-repeat: repeat-x;background-size:100% 100%;}
.overlay_box .cancel{position: absolute;top:1px;right:10px;width: 0.2rem;z-index:6;}
.overlay_box .record_head{text-align: center;margin-top: 12px;}

.reward_record_overlay .reward_record_list{height:3rem;}
.reward_record_overlay .reward_record_list .reward_record {display: flex;display: -webkit-flex;padding: 6px 0 4px 0;border-bottom: 1px solid rgba(255,255,255,0.4);}
.reward_record_overlay .reward_record_list .reward_record_result{display: flex;display: -webkit-flex;}
.reward_record_overlay .reward_record_list .reward_record_result>span{flex-grow: 1;-webkit-flex-grow: 1;text-align: center;}
.reward_record_overlay .reward_record_list .reward_record >div:nth-child(1){width: 55%;margin-right: 5%;}
.reward_record_overlay .reward_record_list .reward_record >div:nth-child(2){width: 20%;}
.reward_record_overlay .reward_record_list .reward_record >div:nth-child(3){width: 20%;text-align: center;}
.reward_record_overlay .reward_record_list .reward_record_head{margin-top:10px;}

.overlay_box .record_head{text-align: center;}

.draw_record_overlay .draw_record_list{height:2.5rem;}
.draw_record_overlay .draw_record_list .draw_record{display: flex;display: -webkit-flex;padding: 6px 0 4px 0;border-bottom: 1px solid rgba(255,255,255,0.4);}
.draw_record_overlay .draw_record_list .draw_record>div{width:33%;}

.draw_record_overlay .overlay_foot{height:0.25rem;line-height: 0.25rem;}


.two_star_overlay{width:34%;}
/*.two_star_overlay .overlay_main{height:2rem;}*/
.two_star_overlay .two_star_box{display: flex;display: -webkit-flex;margin-top:4px;}
.two_star_overlay .two_star_box>div:nth-child(1){min-width:0.3rem;}
.two_star_overlay .two_star_box>div:nth-child(2){flex-grow: 1;-webkit-flex-grow: 1;}
.two_star_overlay .select_number_box{font-size:0.11rem;}
.two_star_overlay .select_number_box>.select{background: #ff0000;border-color:#ff0000;}
.two_star_overlay .select_number_box >span{display:inline-block;text-align:center;line-height:0.18rem;width:0.18rem;
    height:0.18rem;border:1px solid #fff;border-radius:100%;margin-right: 0.05rem;margin-bottom: 0.06rem;}
.two_star_overlay .select_number_box >label{display:inline-block;text-align:center;line-height:0.16rem;width:0.18rem;
    margin-bottom: 0.06rem;margin-right: 0.05rem;border:1px solid #fff;}
.two_star_overlay .overlay_foot{padding:3px 8px;box-sizing: border-box;}
.two_star_overlay .overlay_foot input{width: 0.32rem;padding:0 3px;border:1px solid #fff;color:#fff;line-height: 20px;}
.two_star_overlay .overlay_foot .btn_box{display: flex;display: -webkit-flex;margin:6px 0 7px;}
.two_star_overlay .overlay_foot .btn_box>div{padding:2px 0.07rem;margin-right: 0.05rem;}
.two_star_overlay .overlay_foot .btn_box>div:nth-child(1){background: #3f3f3f;flex-grow: 1;-webkit-flex-grow: 1;}
.two_star_overlay .overlay_foot .btn_box>div:nth-child(2){background: #fc6701;flex-grow: 1;-webkit-flex-grow: 1;}
.two_star_overlay .overlay_foot .btn_box>div:nth-child(3){background: #ff1e00;flex-grow: 1;-webkit-flex-grow: 1;}
.two_star_overlay .overlay_foot .btn_box>div:nth-child(4){margin-right: 0;}


/*投出的金币*/
.draw_golds_div{}
.draw_golds_div img{position:fixed;z-index:5;width: 26px;height:26px;}

/*提示*/
.draw_tip,.tip_box{position: fixed;top:36%;z-index:10;font-size:0.14rem;width:1.6rem;left:50%;display: none;
    text-align:center;margin-left:-0.8rem;}
.draw_tip{animation: bounceInDown .75s;-webkit-animation: bounceInDown .75s;-moz-animation: bounceInDown .75s;}
.tip_box{background-image: url(../img/toast_bg.png);color:#fff;padding:15px;box-sizing: border-box;
    background-repeat: repeat-x;background-size:100% 100%;width:2rem;margin-left:-1rem;}
@keyframes bounceInDown {
    0%,60%,75%,90%,to {animation-timing-function: cubic-bezier(.215,.61,.355,1)}
    0% {opacity: 0;transform: translate3d(0,-3000px,0)}
    60% {opacity: 1;transform: translate3d(0,25px,0)}
    75% {transform: translate3d(0,-10px,0)}
    90% {transform: translate3d(0,5px,0)}
    to {transform: none}
}
@-webkit-keyframes bounceInDown {
    0%,60%,75%,90%,to {-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1)}
    0% {opacity: 0;-webkit-transform: translate3d(0,-3000px,0)}
    60% {opacity: 1;-webkit-transform: translate3d(0,25px,0)}
    75% {-webkit-transform: translate3d(0,-10px,0)}
    90% {-webkit-transform: translate3d(0,5px,0)}
    to {-webkit-transform: none}
}


.bounceOutDown{animation: bounceOutDown .75s;-webkit-animation: bounceOutDown .75s;}
@keyframes bounceOutDown {
    20% { transform: translate3d(0,10px,0)   }
    40%,45% {opacity: 1;transform: translate3d(0,-20px,0) }
    to {  opacity: 0;transform: translate3d(0,2000px,0) }
}
@-webkit-keyframes bounceOutDown {
    20% {-webkit-transform: translate3d(0,10px,0)}
    40%,45% {opacity: 1;-webkit-transform: translate3d(0,-20px,0) }
    to {opacity: 0;-webkit-transform: translate3d(0,2000px,0) }
}

/*.circleProgress_wrapper{width:200px;height: 200px;margin: 50px auto;position: relative;}
.circleProgress_wrapper .wrapper{width: 100px;height: 200px;position: absolute;top:0;overflow: hidden;}
.circleProgress_wrapper .right{right:0;}
.circleProgress_wrapper .left{left:0;}
.circleProgress{width: 160px;height: 160px;border:20px solid #f0a326;border-radius: 50%;position: absolute;top:0;-webkit-transform: rotate(45deg);}
.rightcircle{right:0;border-top:20px solid rgba(255,255,255,0.5);border-right:20px solid rgba(255,255,255,0.5);}
.leftcircle{left:0;border-left:20px solid rgba(255,255,255,0.5);border-bottom:20px solid rgba(255,255,255,0.5);}
.circleProgressLoad_right{-webkit-animation: circleProgressLoad_right 1s linear infinite;}
.circleProgressLoad_left{-webkit-animation: circleProgressLoad_left 1s linear infinite;}
@-webkit-keyframes circleProgressLoad_right{
0%{-webkit-transform: rotate(45deg);}
50%{-webkit-transform: rotate(225deg);}
100%{-webkit-transform: rotate(225deg);}}
@-webkit-keyframes circleProgressLoad_left{
0%{-webkit-transform: rotate(45deg);}
50%{-webkit-transform: rotate(45deg);}
100%{-webkit-transform: rotate(225deg);}}*/

/*@media screen and (orientation: portrait) {
      html{
         width : 100% ;
         height : 100% ;

          overflow : hidden;
      }
      body{
          width : 100% ;
         height : 100% ;

          overflow : hidden;
      }
 
} 
@media screen and (orientation: landscape) {
       
       body{
          width : 100% ;
         height : 100% ;

      }
 
}*/
